<template>
	<view class='panicBuying statusBarHeight'>
		<view class="header">
			<view class="title">
				易货
			</view>
			<view class='session'>
				<view class='session-item' :class="{'session-item-active': item.id==sessionId}"
					:style="{ width: itemWidth + 'px' }" v-for="(item ,index) in sessionList" :key="index"
					@tap="changeSession(item,index)">
					<view class='text'>{{item.name}}</view>
				</view>
			</view>

		</view>

		<view class="list-container">
			<qiangouItemBoxVue :dataItem='item' v-for='item in goodsList' :key="item.id" :type='selectIndex' />
		</view>
	</view>

</template>

<script>
	import {
		goodsListBuy,
		appVersionInfo,
		sessionList,
		addressList,
		appointment,
		getGoodsList
	} from '../../api/api.js'
	import qiangouItemBoxVue from '../../components/basicComponents/qiangouItemBox.vue'
	import countDownTime from "@/components/basicComponents/countdown.vue"
	export default {
		name: 'panicBuying',
		data() {
			return {
				goodsList: [],
				sessionId: '',
				screenWidth: 0, // 屏幕宽度
				itemWidth: 0, // 每个 item 的宽度
				list: [], // 商品列表
				state: '', // 状态0还未到1抢购中2已过期3可预约
				time: '', // 倒计时
				appInfo: '',
				noticeInfo: '',
				interval: '',
				timestamp: '',
				sessionList: [],
				sessionIndex: 0,
				nowTimeStamp: Date.now(), // 当前的时间戳
				timeString: '',
				addressList: [],
				addressId: '',
				isProp: false,
				payPassword: '',
				walletId: 1,
				walletType: [{
						id: 1,
						title: '多多券'
					},
					{
						id: 2,
						title: '快乐豆'
					},
					{
						id: 3,
						title: '多多券+快乐豆'
					},
				],
				goodsId: '',
				selectGoods: {},
				num: 1,
				selectIndex:0,
			}
		},
		components: {
			countDownTime,
			qiangouItemBoxVue
		},
		onShow() {

			this.pageNum = 1
			this.list = []
			// // 查询场次列表
			// this.getSessionList()
			// 获取地址列表
			// this.getAddressList()
			//#ifdef APP-PLUS
			// 获取app版本信息
			// this.getAppVersionInfo()
			//#endif
			clearInterval(this.interval)
		},
		onLoad(e) {
			if (e.session) {
				this.sessionList = JSON.parse(e.session)
				// 获取屏幕宽度
				this.getScreenWidth();
			}
			if (e.sessionId) {
				this.sessionId = e.sessionId

				this.handleGetGoodsList({
					sessionId: e.sessionId
				})

			}

		},
		methods: {
			// // 
			handleGetGoodsList(paramer) {
				getGoodsList(paramer).then(res => {
					console.log('paramer', res)
					if (res.code == 200) {
						this.goodsList = res.data
					} else {
						this.goodsList = []
					}
				})
			},
			// 获取屏幕宽度
			getScreenWidth() {
				// const systemInfo = uni.getSystemInfoSync();
				// this.screenWidth = systemInfo.windowWidth; // 获取屏幕宽度
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select(".session")
						.boundingClientRect((rect) => {
							if (rect) {
								this.screenWidth = rect.width; // 获取容器宽度
								this.calculateItemWidth();
							}
						})
						.exec()
				})

			},
			// 计算每个 item 的宽度
			calculateItemWidth() {
				const listLength = this.sessionList.length; // 数组长度
				const gap = 60; // 假设每个 item 之间有 10px 的间距
				const totalGap = gap * (listLength - 1); // 总间距
				this.itemWidth = (this.screenWidth - totalGap) / listLength; // 计算每个 item 的宽度
			},
			sure() {
				uni.showLoading({
					title: ''
				});
				let data = {
					goodsId: this.goodsId,
					addressId: this.addressId,
					walletType: this.walletId,
					payPassword: this.payPassword,
					quantity: this.num
				}
				appointment(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '预约成功',
						icon: 'none'
					})
					this.closeProp()
				})
			},
			handleCount(type) {
				if (type == 1) {

					if (this.num <= 0) {
						this.num = 0
						returnn
					}
					this.num--
				}
				if (type == 2) {
					this.num++
				}
			},
			closeProp() {
				this.$refs.popup.close()
				this.payPassword = '',
					this.num = 1
			},
			changeWalletType(item) {
				this.walletId = item.id
			},
			goDetail(item) {
				this.selectGoods = item
				if (item.state == 3) { // 预约
					if (item.haveAppointed == 1) { // 已预约
						return
					}
					if (this.addressList.length == 0) {
						uni.showToast({
							title: '请先添加默认地址',
							icon: 'none'
						})
						return
					}
					this.goodsId = item.goodsId
					this.$refs.popup.open('bottom')
				} else if (item.state == 1) { // 抢拍
					var orderInfo = {
						goodsImg: item.imageUrl,
						goodsId: item.goodsId,
						goodsTitle: item.goodsName,
						goodsPrice: item.nowPrice,
						goodsNum: 1,
					}
					var orderInfo = JSON.stringify(orderInfo)
					uni.navigateTo({
						url: '../goods/submitOrder?orderInfo=' + orderInfo + '&payType=1' + '&isVip=0'
					})
				} else if (item.state == 2) { // 已结束
					uni.showToast({
						title: '当前抢购已结束，请等待下一场抢购',
						icon: 'none'
					})
				}
				// uni.navigateTo({
				// 	url:'/pages/index/goodsDetail?goodsId=' + item.goodsId + '&timestamp=' + this.timestamp
				// })
			},
			// // 获取地址列表
			// getAddressList() {
			// 	let data = {}
			// 	addressList(data).then(res => {
			// 		this.addressList = res.data
			// 		// 如果没有添加地址,提示去添加
			// 		if (this.addressList.length == 0) {
			// 			this.addresssInfo = ''
			// 		} else if (this.addressList.length == 1) {
			// 			// 如果只有一个地址,直接显示为默认
			// 			this.addresssInfo = this.addressList[0]
			// 			this.addressId = this.addressList[0].id
			// 		} else if (this.addressList.length > 1) {
			// 			// 如果存在多个地址,先判断是否有默认地址
			// 			let isHaveDefault = this.addressList.some(item => item.isDefault == 1)
			// 			// 如果有,查询默认地址
			// 			if (isHaveDefault) {
			// 				this.addressList.forEach(item => {
			// 					if (item.isDefault == 1) {
			// 						this.addresssInfo = item
			// 						this.addressId = item.id
			// 					}
			// 				})
			// 			} else {
			// 				// 如果没有,默认第一条地址
			// 				this.addresssInfo = this.addressList[0]
			// 				this.addressId = this.addressList[0].id
			// 			}
			// 		}
			// 	})
			// },

			// 获取倒计时
			getCountDown() {
				var that = this
				that.state = that.sessionList[that.sessionIndex].state
				that.interval = setInterval(function() {
					that.time = that.countDown(that.sessionList[that.sessionIndex].nextTimestamp)
				}, 1000)
			},
			changeSession(item, index) {
				// this.nowTimeStamp = Date.now()
				this.selectIndex = index
				this.sessionId = item.id
				this.handleGetGoodsList({
					sessionId: item.id
				})
			},

			// 查询拍卖商品列表
			getList(goodsId) {
				let data = {
					sessionId: this.sessionList[this.sessionIndex].goodsId,
				}
				goodsListBuy(data).then(res => {
					this.list = res.data
					if (res.data[0].state == 1) {
						this.timeString = this.formatTime(new Date(res.data[0].endTimestamp),
							"yyyy-MM-dd hh:mm:ss")
					} else if (res.data[0].state == 3 || res.data[0].state == 0 || res.data[0].state == 2) {
						if (res.data[0].appointEndTimestamp > res.data[0].appointTimestamp && this.nowTimeStamp <
							res.data[0].appointTimestamp) {
							this.timeString = this.formatTime(new Date(res.data[0].appointTimestamp),
								"yyyy-MM-dd hh:mm:ss")
						} else {
							this.timeString = this.formatTime(new Date(res.data[0].nextTimestamp),
								"yyyy-MM-dd hh:mm:ss")
						}
					}
				})
			},
		}
	}
</script>

<style lang='less' scoped>
	page {
		overflow-x: hidden;
		background: rgb(217, 255, 130);
		background: linear-gradient(180deg, rgba(217, 255, 130, 1) 27%, rgba(166, 255, 144, 1) 100%);

	}

	.panicBuying .header {
		width: 100%;
		height: 274rpx;
		background: url("@/static/static-home/image-10.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding: 0 40rpx;
		box-sizing: border-box;

	}

	.panicBuying .list {
		width: 100%;
		/* height: calc(100vh - 346rpx);
		overflow-y:auto; */
	}

	.panicBuying .header .title {
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		font-weight: bold;
		font-size: 44rpx;
		color: #3C3C3C;
	}

	.panicBuying .header .session {
		display: flex;
		margin: 0 auto;
		position: absolute;
		width: 100%;
		bottom: 40rpx;
		left: 50%;
		right: 50%;
		transform: translateX(-43%);
		align-items: center;
	}

	.panicBuying .header .session .session-item {

		height: 76rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-weight: 400;
		font-size: 34rpx;
		color: #00C538;

		background: #F0FFF5;
		margin: 0 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;


	}

	.panicBuying .header .session .session-item:first-child {
		margin: 0 10rpx 0 0;
		border-top-left-radius: 76rpx;
		border-bottom-left-radius: 76rpx;
	}

	.panicBuying .header .session .session-item:last-child {
		margin: 0 0 0 10rpx;
		border-top-right-radius: 76rpx;
		border-bottom-right-radius: 76rpx;
	}

	.panicBuying .header .session .session-item-active {
		background: rgb(166, 249, 89);
		background: linear-gradient(180deg, rgba(166, 249, 89, 1) 0%, rgba(192, 255, 106, 1) 100%);
		font-weight: bold;
		font-size: 34rpx;
		color: #373737;
		height: 90rpx;
		position: relative;
	}

	.panicBuying .header .session .session-item-active::before {
		content: "";
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		top: -30rpx;
		right: 0;
		background: url("@/static/static-home/image-44.png") no-repeat;
		background-size: 100% 100%;
	}

	
	.list-container {
		width: 100%;
		background: #fff;
		/* border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx; */
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx 30rpx;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;

	}
</style>